<template>
	<view>
		<image class="topbg" src="https://youlinapi.zhihui361.com/image/wx/minebg.png" mode=""></image>
		<view class="header-top">
			<view class="header-inner fa" :style="{paddingTop: utils.menuButtonTop(), height: utils.menuButtonHeight(), background: opacity}">
				<view class="fa">
					<view class="header-icon-box">
						<image class="header-icon" src="../../static/message.png" mode="" @click="utils.navTo('/pages/mine/message')"></image>
						<view class="red-point" v-if="unRead"></view>
					</view>
					<view class="header-icon-box">
						<image class="header-icon" src="../../static/settings.png" mode="" @click="utils.navTo('/pages/mine/settings')"></image>
					</view>
				</view>
				<view class="header-title">我的</view>
			</view>
			<view class="header-place" :style="{paddingTop: utils.menuButtonTop(), height: utils.menuButtonHeight()}"></view>
		</view>
		<view class="main pr">
			<view class="user-box fa jcsb" @click="utils.navTo('/pages/mine/userinfo')">
				<view class="fa">
					<image class="avatar" :src="avatar" mode=""></image>
					<view>
						<view class="nickname">{{nickname}}</view>
						<view class="account fa">{{mobile || ''}}</view>
					</view>
				</view>
				<view class="my-page fa">
					<view>编辑资料</view>
					<image class="right-icon" src="../../static/right2.png" mode=""></image>
				</view>
			</view>
			<view class="order-box fa">
				<view class="order-list fa jcsb" @click="goOrder(1)">
					<view>
						<view class="name">取送订单</view>
						<view class="detail fa">
							<view>查看详情</view>
							<image class="right-icon" src="../../static/right.png" mode=""></image>
						</view>
					</view>
					<image class="order-image" src="../../static/fetchorder.png" mode=""></image>
				</view>
				<view class="order-list fa jcsb" @click="goOrder(2)">
					<view>
						<view class="name">商城订单</view>
						<view class="detail fa">
							<view>查看详情</view>
							<image class="right-icon" src="../../static/right.png" mode=""></image>
						</view>
					</view>
					<image class="order-image" src="../../static/mallorder.png" mode=""></image>
				</view>
			</view>
			<view class="vip-box">
				<image class="vipbg" src="https://youlinapi.zhihui361.com/image/wx/vip.png" mode="" @click="utils.navTo('/pages/mine/vip')"></image>
			</view>
			<view class="menu-wrapper">
				<view class="menu-title">常用功能</view>
				<view class="menu-box flex fww">
					<view class="menu-list fa fdc jcc" @click="utils.navTo('/pages/mine/address')">
						<image class="menu-icon" src="../../static/mine1.png" mode=""></image>
						<view>我的地址</view>
					</view>
					<view class="menu-list fa fdc jcc" @click="utils.navTo('/pages/mine/wallet')">
						<image class="menu-icon" src="../../static/mine2.png" mode=""></image>
						<view>我的钱包</view>
					</view>
					<view class="menu-list fa fdc jcc" @click="utils.navTo('/pages/mine/feedback')">
						<image class="menu-icon" src="../../static/mine3.png" mode=""></image>
						<view>投诉建议</view>
					</view>
					<view class="menu-list fa fdc jcc" @click="utils.navTo('/pages/mine/coupon')">
						<image class="menu-icon" src="../../static/mine4.png" mode=""></image>
						<view>我的优惠券</view>
					</view>
					<view class="menu-list fa fdc jcc" @click="utils.navTo('/pages/mine/collection')">
						<image class="menu-icon" src="../../static/mine5.png" mode=""></image>
						<view>我的收藏</view>
					</view>
					<view class="menu-list fa fdc jcc" @click="utils.navTo('/pages/mine/rider_apply')">
						<image class="menu-icon" src="../../static/mine6.png" mode=""></image>
						<view>配送员端</view>
					</view>
					<view class="menu-list fa fdc jcc" @click="utils.navTo('/pages/mine/service')">
						<image class="menu-icon" src="../../static/mine7.png" mode=""></image>
						<view>联系客服</view>
					</view>
					<view class="menu-list fa fdc jcc" @click="utils.navTo('/pages/login/agreement', {type: 1})">
						<image class="menu-icon" src="../../static/mine8.png" mode=""></image>
						<view>用户协议</view>
					</view>
					<view class="menu-list fa fdc jcc" @click="utils.navTo('/pages/mine/aboutus')">
						<image class="menu-icon" src="../../static/mine9.png" mode=""></image>
						<view>关于平台</view>
					</view>
					<view class="menu-list fa fdc jcc" @click="utils.navTo('/pages/mine/order_center')">
						<image class="menu-icon" src="../../static/mine10.png" mode=""></image>
						<view>订单中心</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				opacity: 'rgba(255,255,255,0)',
				avatar: '',
				nickname: '',
				mobile: '',
				unRead: 0
			};
		},
		onPageScroll(e) {
			this.opacity = 'rgba(24,201,84,' + this.utils.opacityCompute(e.scrollTop) + ')'
		},
		onLoad() {
			
		},
		onShow() {
			this.getUserinfo()
			this.getUnread()
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.getUserinfo()
				uni.stopPullDownRefresh()
			}, 1000)
		},
		methods: {
			goOrder(type) {
				let token = uni.getStorageSync('token')
				if(!token) return uni.navigateTo({
					url: '/pages/login/login'
				})
				uni.setStorageSync('orderTab', type)
				uni.switchTab({
					url: '/pages/order/order'
				})
			},
			getUserinfo() {
				this.api.userinfoFunc().then(res => {
					if(res.code == 200) {
						this.avatar = res.data.avatar
						this.nickname = res.data.name
						this.mobile = res.data.phone
					}else {
						this.avatar = '../../static/avatar.png'
						this.nickname = '未登录'
						this.mobile = ''
					}
				})
			},
			getUnread() {
				this.api.informUnreadFunc().then(res => {
					if(res.code == 200) {
						if(res.data) {
							this.unRead = 1
						}
					}else {
						this.unRead = 0
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.topbg{
		position: fixed;
		top: 0;
		width: 100%;
	}
	.header-inner{
		position: fixed;
		z-index: 999;
		left: 0;
		right: 0;
		padding-bottom: 16rpx;
		padding-left: 40rpx;
		padding-right: 40rpx;
		.header-icon-box{
			position: relative;
			margin-right: 42rpx;
			width: 52rpx;
			height: 52rpx;
			&:last-child{
				margin-right: 0;
			}
			.header-icon{
				width: 52rpx;
				height: 52rpx;
			}
			.red-point{
				position: absolute;
				top: 2rpx;
				right: 2rpx;
				width: 12rpx;
				height: 12rpx;
				border-radius: 50%;
				background-color: #FE3134;
			}
		}
		.header-title{
			position: absolute;
			left: 200rpx;
			right: 200rpx;
			text-align: center;
			font-size: 36rpx;
			color: #fff;
		}
	}
	.header-place{
		padding-bottom: 16rpx;
	}
	.user-box{
		margin-top: 22rpx;
		padding-left: 26rpx;
		color: #fff;
		.avatar{
			margin-right: 22rpx;
			width: 128rpx;
			height: 128rpx;
			border-radius: 50%;
		}
		.nickname{
			font-size: 36rpx;
			font-weight: bold;
		}
		.account{
			margin-top: 10rpx;
			font-size: 30rpx;
		}
		.account-icon{
			margin-left: 12rpx;
			width: 36rpx;
			height: 36rpx;
		}
		.my-page{
			padding: 0 10rpx 0 24rpx;
			height: 54rpx;
			font-size: 26rpx;
			.right-icon{
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
	.order-box{
		margin: 38rpx 24rpx 0;
		.order-list{
			padding: 0 20rpx 0 24rpx;
			width: 344rpx;
			height: 158rpx;
			border-radius: 12rpx;
			background-color: #fff;
			&:last-child{
				margin-left: 14rpx;
			}
			.name{
				font-size: 30rpx;
				font-weight: bold;
			}
			.detail{
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #aaa;
				.right-icon{
					width: 24rpx;
					height: 24rpx;
				}
			}
			.order-image{
				width: 122rpx;
				height: 122rpx;	
			}
		}
	}
	.vip-box{
		margin: 22rpx 24rpx 0;
		.vipbg{
			width: 100%;
			height: 112rpx;
		}
	}
	.menu-wrapper{
		margin: 20rpx 24rpx;
		padding: 2rpx 0 30rpx;
		border-radius: 16rpx;
		background-color: #fff;
		.menu-title{
			padding: 24rpx 20rpx;
			border-bottom: 2rpx solid #eee;
			font-size: 30rpx;
			font-weight: bold;
		}
		.menu-box{
			.menu-list{
				flex-basis: 25%;
				margin-top: 36rpx;
				font-size: 24rpx;
				.menu-icon{
					margin-bottom: 12rpx;
					width: 68rpx;
					height: 68rpx;
				}
			}
		}
	}
</style>
